<template>
  <div>
    <BasicTable @register="registerTable" />
  </div>
</template>

<script lang="ts" name="member-account-detail" setup>
  import { ref, useAttrs, unref, toRaw } from "vue"
  import { BasicTable, TableAction, ActionItem, useTable, BasicColumn } from "/@/components/Table"
  import { useDrawer } from "/@/components/Drawer"
  import { useModal } from "/@/components/Modal"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { accountDetailColumn, pointAccountSearchFormSchema, ACCOUNT_TYPE, experienceAccountSearchFormSchema } from "./user.data"
  import { pageAccountDetail } from "/@/api/member/user.api.ts"
  import { Icon } from "/@/components/Icon"
  import { useGo } from "/@/hooks/web/usePage"

  const attrs = useAttrs()
  const { createMessage, createConfirm } = useMessage()
  const selectRows = ref([])
  const [registerDrawer, { openDrawer }] = useDrawer()
  const [registerModal, { openModal }] = useModal()

  const { accountType, memberId } = unref(attrs)
  const detailActionColumn: BasicColumn = {
    width: 60,
    title: "操作",
    dataIndex: "action",
    slot: "tableActions",
    actions: (record) => [
      {
        label: "详情",
        onClick: handleDetail.bind(null, record),
      },
    ],
  }

  const getSearchFormSchemas = () => {
    switch (accountType) {
      case ACCOUNT_TYPE.POINT:
        return pointAccountSearchFormSchema
      case ACCOUNT_TYPE.EXPERIENCE:
        return experienceAccountSearchFormSchema
      default:
        return []
    }
  }

  const [registerTable, { reload }] = useTable({
    api: (params) => pageAccountDetail({ accountType, ...params, memberId }),
    bordered: false,
    columns: accountDetailColumn,
    size: "small",
    formConfig: {
      baseColProps: { lg: 6, md: 12 },
      labelWidth: 90,
      schemas: getSearchFormSchemas(),
      showResetButton: false,
      fieldMapToTime: [["fieldTime", ["beginDate", "endDate"], "YYYY-MM-DD"]],
    },
    actionColumn: detailActionColumn,
    showTableSetting: false,
    useSearchForm: true,
    showIndexColumn: false,
    pagination: true,
    canResize: false,
    scroll: {
      x: undefined,
    },
    rowKey: "id",
    beforeFetch: (params) => {
      return Object.assign({ column: "createTime", order: "desc" }, params)
    },
  })

  const handleDetail = (record) => {}
</script>

<style scoped></style>
